import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Form, Input, Button, Card, Typography, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './Auth.css';
import { userList } from '../api/user';

const { Title, Text } = Typography;

const Login: React.FC = () => {
    const [isLoading, setIsLoading] = useState(false);
    const navigate = useNavigate();

    const handleSubmit = async (values: any) => {
        setIsLoading(true);

        try {
            const { email, password } = values;

            const matchedUser = userList.find((u) => u.email === email);

            if (!matchedUser) {
                message.error('账号不存在');
                setIsLoading(false);
                return;
            }

            if (matchedUser.password !== password) {
                message.error('密码不正确');
                setIsLoading(false);
                return;
            }

            const mockToken = 'mock-jwt-token-' + Date.now();
            localStorage.setItem('authToken', mockToken);
            localStorage.setItem('userRole', matchedUser.role);
            localStorage.setItem('userEmail', matchedUser.email);

            message.success('登录成功！');
            navigate('/admin');
        } catch (err) {
            message.error('登录失败，请稍后重试');
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div className="auth-container">
            <Card className="auth-card" style={{ width: 400, margin: '0 auto' }}>
                <div style={{ textAlign: 'center', marginBottom: 24 }}>
                    <Title level={2}>登录</Title>
                    <Text type="secondary">欢迎回来，请登录您的账户</Text>
                </div>

                <Form
                    name="login"
                    onFinish={handleSubmit}
                    layout="vertical"
                    size="large"
                >
                    <Form.Item
                        name="email"
                        label="邮箱"
                        rules={[
                            { required: true, message: '请输入您的邮箱' },
                            { type: 'email', message: '请输入有效的邮箱地址' }
                        ]}
                    >
                        <Input
                            prefix={<UserOutlined />}
                            placeholder="请输入您的邮箱"
                        />
                    </Form.Item>

                    <Form.Item
                        name="password"
                        label="密码"
                        rules={[
                            { required: true, message: '请输入您的密码' },
                            { min: 6, message: '密码至少6位' }
                        ]}
                    >
                        <Input.Password
                            prefix={<LockOutlined />}
                            placeholder="请输入您的密码"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button
                            type="primary"
                            htmlType="submit"
                            loading={isLoading}
                            block
                            size="large"
                        >
                            {isLoading ? '登录中...' : '登录'}
                        </Button>
                    </Form.Item>
                </Form>

                <div style={{ textAlign: 'center', marginTop: 16 }}>
                    <Text>
                        还没有账户？
                        <Link to="/register" className="auth-link">
                            立即注册
                        </Link>
                    </Text>
                    <br />
                    <Link to="/" className="auth-link">
                        ← 返回首页
                    </Link>
                </div>
            </Card>
        </div>
    );
};

export default Login;